<template>
  <el-menu unique-opened :default-active="defaultActive" class="el-menu-vertical-demo">
    <node  v-for="(node,index) in accessRoutes" :node="node" :key="index"></node>
  </el-menu>
</template>

<script>
import Node from "./node.vue";
import {leftMenu} from "@/router"

export default {
  name:"SideBar",
  components: {
    Node,
  },
  data() {
    return {
      defaultActive: "/",
     
    };
  },
  computed: {
    accessRoutes() {
      return  leftMenu.concat(this.$store.state.permission.accessRoutes).sort(this.up) ;
    },
  },
  watch: {
    $route: {
      handler(route) {
        this.defaultActive = route.path;
      },
      deep: true,
      immediate: true,
    },
  },
  methods:{
     up  (a, b) {
      return a.meta.sort - b.meta.sort;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>